<template>
    <div :id="id" :style="style"></div>
</template>
<script>
    import * as echarts from "echarts";
    import resize from '@/mixins/resize'
    export default {
        mixins:[resize],
        name:"BaseEchart",
        props:{
            id:{
                type:String,
                default:"myChart"
            },
            height:{
                type:String,
                default:"100px"
            },
            option:{
                type:Object,
                default:function () {
                    return {}
                }
            }
        },
        data(){
          return{
              chart:null
          }
        },
        mounted() {
            this.initCharts()
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        computed:{
            style(){
                return {width: "100%", height: this.height}
            }
        },
        methods:{
            initCharts(){
                var chartDom = document.getElementById(this.id);
                this.chart = echarts.init(chartDom);
                this.option && this.chart.setOption(this.option);
            }
        },

    }
</script>
